<template>
  <div class="qlf-container">
    <div class="head">
      <Aradio v-model="certificate" :options="options" />
    </div>
    <div class="main">
      <div class="form-main">
        <div class="title">资格证书</div>
        <div class="gray-line"></div>
        <el-form
          :model="formData"
          ref="form1"
          label-position="top"
          class="form"
        >
          <el-row :gutter="160">
            <el-col :span="8">
              <el-form-item label="姓名" prop="realname">
                <el-input v-model="formData.realname" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="证书名称"
                prop="paperCertName"
                :rules="$validate.maxLength(true, 0, 50)"
              >
                <el-input
                  v-model.trim="formData.paperCertName"
                  :disabled="formData.isEditable === '0'"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="资格证书编号"
                prop="paperCertCode"
                :rules="$validate.maxLength(true, 0, 50)"
              >
                <el-input
                  v-model.trim="formData.paperCertCode"
                  :disabled="formData.isEditable === '0'"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="btn">
          <el-button
            type="primary"
            @click="submitForm"
            v-show="formData.isEditable !== '0'"
            :disabled="formData.isEditable === '0'"
            >提交修改</el-button
          >
        </div>
      </div>
      <div class="form-main" v-if="formData.regCert">
        <div class="title">注册证书</div>
        <div class="gray-line"></div>
        <el-form
          :model="formData"
          ref="form2"
          label-position="top"
          class="form"
        >
          <el-row :gutter="160">
            <el-col :span="8">
              <el-form-item label="注册证书编号" prop="certCode">
                <el-input
                  v-model="formData.regCert.certCode"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专业名称" prop="major">
                <el-input v-model="formData.regCert.major" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="聘用单位" prop="employUnit">
                <el-input
                  v-model="formData.regCert.employUnit"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="160">
            <el-col :span="8">
              <el-form-item label="有效期" prop="validDate">
                <el-input
                  v-model="formData.regCert.validDate"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发证日期" prop="certTime">
                <el-input
                  v-model="formData.regCert.certTime"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="证书下载" prop="postalCode">
                <el-button type="primary" size="mini" @click="down"
                  >立即下载</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Aradio from '@/components/Radio/Aradio';
import userApi from '@/api/user';
import { decrypt } from '@/utils/sms4util';

export default {
  components: { Aradio },
  data() {
    return {
      certificate: 1,
      options: [{ label: '二级造价工程师', value: 1 }],
      formData: {},
    };
  },
  computed: {
    userId() {
      return this.$store.state.user.userInfo.id;
    },
    userType() {
      return this.$store.state.user.userInfo.userType;
    },
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      let params = {
        id: this.userId,
        type: this.userType,
      };
      // 获取用户信息
      const res = await userApi.getUserInfo(params);
      this.formData = {
        ...this.formData,
        ...res,
        phone: res.phone ? decrypt(res.phone) : '',
        paperCode: res.paperCode ? decrypt(res.paperCode) : '',
      };
    },
    // 提交表单
    async submitForm() {
      try {
        await this.$validate.checkValidate(this.$refs.form1);
        let params = {
          ...this.formData,
          userType: this.userType,
        };
        await userApi.editUserInfo(params);
        this.$message.success('修改成功');
      } catch (error) {
        console.log(error);
      }
    },
    // 下载证书
    down() {
      window.open(this.formData?.regCert?.certFile?.fileUri);
    },
  },
};
</script>
<style lang="scss" scoped>
.qlf-container {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  .head {
    width: 100%;
    height: 80px;
    padding: 0 30px;
    background-color: #fff;
    display: flex;
    align-items: center;
  }
  .main {
    margin-top: 18px;
    flex: 1;
    background-color: #fff;
    .form-main {
      padding: 20px;
      .title {
        height: 40px;
        font-size: 18px;
        font-weight: 600;
        border-bottom: 1px solid #f2f2f2;
      }
      .form {
        margin-top: 20px;
      }
      .btn {
        display: flex;
        justify-content: center;
      }
    }
    .form-main:first-child {
      border-bottom: 1px solid #f2f2f2;
    }
  }
}
</style>
